<template>
  <MyDrawer ref="MyRef" title="设置地区" @submit="submit" :disabled="false" width="30%">
    <div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="(p, index) in drawerProps.canSetRegion" :key="index" :label="p.id">
          <template #default>{{ p.name }}</template>
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </MyDrawer>
</template>

<script setup lang="ts">
import { Region } from "@/api/interface/region";
import MyDrawer from "@/components/MyDrawer/index.vue";
import { ElMessage } from "element-plus";
import { ref } from "vue";

const MyRef = ref<InstanceType<typeof MyDrawer> | null>();

// -----------当前的多选组
const checkList = ref<number[]>([]);

interface DrawerProps {
  rowData: Region.Option[];
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
  username: string;
  canSetRegion?: any;
}

const initData: Region.Option[] = [];

const drawerProps = ref<DrawerProps>({
  rowData: JSON.parse(JSON.stringify(initData)),
  username: ""
});

const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  // 初始化以选择的地区
  if (drawerProps.value.rowData) {
    checkList.value = drawerProps.value.rowData.map((e: Region.Option) => e.id) as any;
  } else {
    checkList.value = [];
  }
  console.log(drawerProps.value);
  MyRef.value?.acceptParams();
};

const submit = async () => {
  try {
    const params: any = {
      ids: checkList.value,
      username: drawerProps.value.username
    };
    await drawerProps.value.api!(params);
    ElMessage.success("成功");
    await drawerProps.value.getTable!();
    MyRef.value?.close();
  } catch (error) {}
};

defineExpose({
  acceptParams
});
</script>

<style></style>
